<template>
	<text class="title">欢迎注册</text>
	<view class="login">
		<uni-forms :modelValue="formData" :rules="rules" ref="form">
			<uni-forms-item name="user_name" label="姓名" label-width="80px">
				<input type="text" v-model="formData.user_name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item name="mobile" label="手机号" label-width="80px">
				<input type="text" v-model="formData.mobile" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item name="idcard" label="身份证" label-width="80px">
				<input type="text" v-model="formData.idcard" placeholder="请输入身份证" />
			</uni-forms-item>
			<uni-forms-item name="area" label="地区" label-width="80px">
				<picker :range='area' @change="onRegionChange" range-key="label">
					<input type="text" :value="areaName" placeholder="请选择地区" readonly :disabled="true"/>
				</picker>
			</uni-forms-item>

			<uni-forms-item name="password" label="密码" label-width="80px">
				<input type="password" v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
			<uni-forms-item name="confirm" label="确认密码" label-width="80px">
				<input type="password" v-model="formData.confirm" placeholder="请输入确认密码" />
			</uni-forms-item>
			<!-- <uni-forms-item name="verify" label="验证码">
				<view class="verify">
					<input type="text" v-model="formData.verify" placeholder="请输入验证码" />
					<button size="mini" :loading="loading" @click="getCode" :disabled="disabled" style="width:130;padding: 15rpx;">获取验证码</button>
				</view>
			</uni-forms-item> -->
		</uni-forms>
		<button @click="submitForm">立即注册</button>
		<view class="bottom">
			<view class="register" @click="toRegister">注册协议</view>
			<view class="register" @click="toLogin">用户登录</view>
		</view>
	</view>
</template>

<script>
	import {
		register,
		areaData
	} from '@/api/login.js';
	import {mixin} from '@/static/mixin.js'
	export default {
		mixins:[mixin],
		data() {
			return {
				formData: {
					user_name: '',
					mobile: '',
					area: '',
					password: '',
					confirm: '',
					idcard: '',
					verify: '111111'
				},
				rules: {
					user_name: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名',
						}]
					},
					mobile: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}]
					},
					idcard: {
						rules: [{
							required: true,
							errorMessage: '请输入身份证号',
						}]
					},
					area: {
						rules: [{
							required: true,
							errorMessage: '请选择地区',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}]
					},
					confirm: {
						rules: [{
							required: true,
							errorMessage: '请输入确认密码',
						}]
					}
				},
				area: [],
				areaName: '',
				items: ['学习记录', '学习统计'],
				current: 0,
				active: 0,
				dynamicList: [],
				loading:false,
				disabled:false
			}
		},
		onLoad() {
			this.getArea()
		},
		methods: {
			getArea() {
				console.log('111111');
				let data = {
					dict_type: "reg_area"
				}
				areaData(data).then(res => {
					console.log('111111', res);
					this.area = res
					console.log(this.area);
					// uni.reLaunch({
					// 	url: 'login'
					// })
				})
			},
			submitForm() {
				console.log(this.formData);
				this.$refs.form.validate().then(resInfo => {
					register(this.formData).then(res => {
						console.log("55555",res);
						uni.reLaunch({
							url: 'login'
						})
						uni.showToast({
							title:"注册成功"
						})				
					}).catch(err=>{
						uni.showToast({
							title:"注册失败"
						})
					})
				})
				
			},
			getCode() {
				this.loading = true
				this.disabled = true
				// 在这里执行表单提交操作，可以使用promise实现异步操作
				register(this.formData).then(() => {
				  this.loading = false
				  uni.showToast({ title: '获取成功' })
				})
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			// 地区选择
			onRegionChange(e) {
				let idx = e.detail.value[0]
				this.areaName = this.area[idx].label
				this.formData.area = this.area[idx].value
				console.log(e);
			},
			group(val) {
				this.active = val;
			},
			Class(val) {
				this.active = val;
			},
			toExam() {
				uni.navigateTo({
					url: '/pages/exam/index'
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			toRegister() {
				uni.navigateTo({
					url: '/pages/public/register'
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.title {
		display: flex;
		padding: 10px;
		padding-bottom: 10px;
		font-size: $uni-font-size-xxl;
		font-weight: 500;
	}

	.buttonActive {
		background-color: $uni-color-primary;
		color: #313131;
	}

	.login {
		.verify {
			display: flex;
			justify-content: space-between;
			align-items: center;

			button {
				width: 120px;
				height: 40px;
				margin: 0;
			}
		}

		padding: 20px;

		button {
			margin-top: 20px;
			height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: $uni-color-primary;
			color: $uni-text-color-white;
			font-weight: 700;
		}

		input {
			height: 30px;
			font-size: 18px;
		}

		:deep(.uni-forms-item) {
			border-bottom: 1px solid $uni-border-color;
			margin-bottom: 0;
			padding-top: 20px;
			padding-bottom: 19px;
		}

		.register {
			color: $uni-text-color-grey;
			padding-top: 20px;
		}
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
